<template>
  <div class="home">
    <!-- Main Content -->
    <main class="main-content">
      <!-- 轮播图和右侧大盒子 -->
      <div class="carousel-wrapper">
        <!-- Carousel (轮播图) -->
        <div class="carousel-container">
          <el-carousel trigger="click" height="600px" autoplay>
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <img :src="item.src" alt="carousel image" class="carousel-img" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 右侧大盒子 -->
        <div class="right-box">
          <div class="box-item">
            <img src="@/assets/sign-7560710_640.jpg" alt="category image" class="box-img" />
            <div class="box-text">人生没有如果，只有结果；不怕失败，就怕停滞不前。</div>
          </div>
          <div class="box-item">
            <img src="@/assets/sports-2282916_640.jpg" alt="category image" class="box-img" />
            <div class="box-text">成功并不是终点，努力的过程才是最值得骄傲的。</div>
          </div>
          <div class="box-item">
            <img src="@/assets/keep-6234628_640.jpg" alt="category image" class="box-img" />
            <div class="box-text">即使前方的路布满荆棘，心中有梦想，就能走得更远。</div>
          </div>
          <div class="box-item">
            <img src="@/assets/ai-generated-7975127_640.png" alt="category image" class="box-img" />
            <div class="box-text">每一次努力，都是在为未来的自己铺路。</div>
          </div>
        </div>
      </div>

    <!-- 分类按钮 -->
    <div class="category-buttons">
      <el-button v-for="category in categories" :key="category.id" @click="fetchPostsByCategory(category.id)" class="category-button">
        <img src="@/assets/logo.png" alt="category icon" class="category-icon" />
        <span class="category-text">{{ category.name }}</span>
      </el-button>
    </div>

    <!-- 文章列表部分 -->
    <section class="post-list">
      <div class="post-item" v-for="post in posts" :key="post.id">
        <!-- 文章左侧盒子，显示图片 -->
        <div class="post-image-box">
          <img v-if="post.attachment_url" :src="post.attachment_url" alt="Post Image" class="post-image" />
          <img v-else src="@/assets/logo.png" alt="Default Image" class="post-image" />
        </div>

        <!-- 文章内容部分 -->
        <div class="post-content">
          <div class="post-title">{{ post.title }}</div>

          <div class="post-actions">
            <router-link :to="'/erjifenlei'"><h5>查看详情</h5></router-link>
          </div>
        </div>
      </div>
    </section>
    </main>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <div id="team-members" class="section fullcover" data-margin="40px 0 0" data-padding="40px 0" data-bg="images/slider.jpg" data-bgmark="rgba(90, 181, 50, 0.5)">
    <div class="container">
      <div class="row">
        <div class="col-md-3 bottom-xs-30">
          <div class="team-member">
            <div class="team-member-image">
              <a href="#"><img src="@/assets/flowers-6659304_640.jpg" alt=""></a>
            </div>
            <div class="team-member-content text-center">
              <h4>前行：走在未知的路上</h4>
              <span class="desc">勇敢前行，迎接未知的挑战。</span>
              <div class="team-member-content-dt">
                <p>人生的道路从不平坦，但每一步的前行都意味着新的可能。面对未知，我们常常心生畏惧，但正是这种未知，成就了我们的成长和勇气。不要因迷茫而停步，不要因困难而退缩。每一次坚定的迈步，都是对自我潜力的探索。即使前方荆棘丛生，前行的每一寸，都离梦想更近。</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3 bottom-xs-30">
          <div class="team-member">
            <div class="team-member-image">
              <a href="#"><img src="@/assets/love-1449763_640.jpg" alt=""></a>
            </div>
            <div class="team-member-content text-center">
              <h4>挫折：低谷也是成长的一部分</h4>
              <span class="desc">挫折是人生的必经之路。</span>
              <div class="team-member-content-dt">
                <p>挫折不意味着终点，它只是人生中的一段路程。每个人都会经历失落与失败，但这些经历并非无意义，它们会让我们更加坚韧，磨砺出更强的内心。在困境中，我们学会调整，学会从失败中汲取力量。不要害怕挫折，它是你通往成功的必经之路，正是这些考验，塑造了更好的你。</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3 bottom-xs-30">
          <div class="team-member">
            <div class="team-member-image">
              <a href="#"><img src="@/assets/motivational-1177436_640.jpg" alt=""></a>
            </div>
            <div class="team-member-content text-center">
              <h4>奋斗：用努力书写未来</h4>
              <span class="desc">奋斗是成功的起点和动力。</span>
              <div class="team-member-content-dt">
                <p>奋斗不仅仅是日复一日的劳作，它是一种对未来的承诺。每一分努力都是对梦想的追求，每一滴汗水都在为更好的明天积蓄力量。生活的美好并不总是唾手可得，它需要我们用不懈的奋斗去争取。在奋斗的过程中，你会发现每一步都充满意义，每一次努力都离目标更近，最终你会发现，奋斗本身就是一种无与伦比的财富。</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3 bottom-xs-30">
          <div class="team-member">
            <div class="team-member-image">
              <a href="#"><img src="@/assets/sentiment-998357_640.jpg" alt=""></a>
            </div>
            <div class="team-member-content text-center">
              <h4>释怀：放下过去，拥抱未来</h4>
              <span class="desc">释怀是一种内心的解脱。</span>
              <div class="team-member-content-dt">
                <p>有时候，过去的伤痛、遗憾、失败，都会深深地影响我们前行的步伐。学会释怀，就是学会放下那些无法改变的事情，给自己一个重新开始的机会。释怀不是忘记，而是理解与接受，让心灵不再被重负困扰。当你真正放下时，你会发现，内心的世界变得更加宽广与自由。放下过去，才能更好地拥抱未来的无限可能。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

 
    <!-- Footer -->
    <footer class="footer">
      <p>&copy; 2024 Your Blog. All rights reserved.</p>
    </footer>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getToken, removeToken } from '@/utils/auth';
import axios from 'axios';

export default {
  name: 'pro_Home',
  setup() {
    const searchQuery = ref('');
    const router = useRouter();
    const isLoggedIn = ref(!!getToken()); // 根据 token 判断是否登录
    const carouselItems = [
      { src: require('@/assets/carousel1.jpg') },
      { src: require('@/assets/carousel2.jpg') },
      { src: require('@/assets/carousel3.jpg') },
    ];

    const posts = ref([]);
    const categories = ref([
      { id: 0, name: 'GoLang' },
      { id: 1, name: 'Java' },
      { id: 2, name: 'Python' },
      { id: 3, name: 'Kotlin' }
    ]);

    const logout = () => {
      removeToken(); // 清除存储的 token
      isLoggedIn.value = false;
      router.push('/login'); // 跳转到登录页
    };

    // 获取文章数据
    const fetchPostsByCategory = async (categoryId) => {
      try {
        const response = await axios.get(`http://localhost:9090/posts/category/${categoryId}`);
        posts.value = response.data.data; // 更新文章数据
      } catch (error) {
        console.error('获取文章失败:', error);
      }
    };

    // 获取分类数据（初始化时可调用）
    onMounted(() => {
      fetchPostsByCategory(0); // 默认加载第一个分类的文章
    });

    return { searchQuery, isLoggedIn, carouselItems, posts, categories, logout, fetchPostsByCategory };
  },
};
</script>

<style scoped>
/* Layout Styles */
.home {
  font-family: Arial, sans-serif;
}



.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 分类按钮样式 */
.category-buttons {
  margin-top: 8%;
  display: flex;
  justify-content: center;
  gap: 100px;
}

.category-button {
  display: flex;
  align-items: center;    /* 垂直居中对齐图片和文字 */
  justify-content: center;
  padding: 10px 20px;
  font-size: 48px;
  border: none;           /* 去掉默认的按钮边框 */
  background-color: #f5f5f5;
  transition: background-color 0.3s ease;
}

.category-button:hover {
  background-color: #e0e0e0; /* 鼠标悬浮时背景颜色变化 */
}

.category-icon {
  width: 40px;  /* 设置图片的宽度 */
  height: 40px; /* 设置图片的高度 */
  object-fit: cover; /* 保证图片不变形 */
  margin-right: 8px;  /* 图片和文字之间的间距 */
}

.category-text {
  font-size: 16px;
  color: #333; /* 设置文字颜色 */
}

.category-buttons .el-button {
  font-size: 16px;
}

/* Main Content Styles */
.main-content {
  padding: 20px;
}

.post-list {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.post-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.post-title {
  flex: 1;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.post-image-box {
  width: 150px;
  height: 150px;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}

.post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-content {
  flex: 3;
  font-size: 14px;
  color: #666;
}

.post-actions {
  flex: 1;
  text-align: center;
}

.post-actions a {
  color: #42b983;
  text-decoration: none;
}

/* Footer Styles */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #f8f8f8;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 14px;
  color: #666;
}
/* 轮播图和右侧盒子布局 */
.carousel-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 使轮播图和右侧盒子垂直对齐 */
  width: 100%; /* 确保占满整行 */
}

.carousel-container {
  width: 70%; /* 轮播图宽度 */
}

.right-box {
  display: flex;
  flex-direction: column;
  width: 28%; /* 右侧大盒子的宽度 */
  gap: 20px;
  height: 600px; /* 设置与轮播图相同高度 */
}

.box-item {
  position: relative;
  height: 25%; /* 让每个小盒子的高度平分右侧盒子 */
  width: 100%;
}

.box-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px;
  font-size: 16px;
}
body {
      background-color: #e8f5e9; /* 绿色背景 */
    }
    .section {
      padding: 40px 0;
    }
    .team-member-image img {
      border-radius: 50%; /* 图片椭圆形显示 */
      width: 150px;
      height: 150px;
      object-fit: cover;
      margin-bottom: 20px;
    }
    .team-member {
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: transform 0.3s;
    }
    .team-member:hover {
      transform: translateY(-10px);
    }
    .team-member-content {
      padding: 20px;
    }
    .team-member-content h4 {
      color: #388e3c; /* 绿色字体 */
      font-size: 18px;
    }
    .desc {
      display: block;
      font-size: 14px;
      color: #6b8e23; /* 深绿色 */
      margin-bottom: 15px;
    }
    .team-member-content-dt p {
      font-size: 14px;
      color: #333;
    }
</style>
<!-- 引入 Bootstrap CSS 和 JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>